<%@ Page Language="C#" MasterPageFile="~/HomePages.Master" AutoEventWireup="true" CodeBehind="Search.aspx.cs" Inherits="BusinessService.MyPlace.Search" Title="Untitled Page" %>
<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">
  <link href="../Content/MyMap.css" rel="stylesheet" type="text/css" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script src="../Content/BusinessService.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="../Content/PlaceSearch.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ82LsCgTSsdpNEnBsExtoeJv4cdBSUkiLH6ntmAr_5O4EfjDwOa0oZBQ" type="text/javascript"></script>
<%-- <script src="../Content/js/util.js" type="text/javascript"></script>--%>
<script type="text/javascript">
  
   var map, places, iw;
  var markers = [];
  var autocomplete;
  
  var geocoder;

  function initialize() {
  geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(37.783259, -122.402708);
    var myOptions = {
      zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    places = new google.maps.places.PlacesService(map);
    google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('txtSearch'));
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      showSelectedPlace();
    });
    
    
    var html = "<table>" +
                 "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
                 "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
                 "<tr><td>Type:</td> <td><select id='type'>" +
                 "<option value='bar' SELECTED>bar</option>" +
                 "<option value='restaurant'>restaurant</option>" +
                 "</select> </td></tr>" +
                 "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
   
   var infowindow = new google.maps.InfoWindow({
     content: html
    });
    var maker;
    google.maps.event.addListener(map, "click", function(event) {
//    document.getElementById("autocomplete").value = event.latLng.toUrlValue(6);
//    codeLatLng();
        marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });
        google.maps.event.addListener(marker, "click", function() {
          infowindow.open(map, marker);
        });
    });
  }  

</script>
<style>
.placeIcon {
  width: 32px;
  height: 32px;
  margin: 5px;
}
#results {
  font-size: 12px;
  border-collapse: collapse;
}
</style>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <!-- left -->
<div id="left" style=" cursor: pointer; overflow:hidden;">
<table id="results"></table>   
</div>
 <!-- main map-->
<div id="map">
</div>  
</asp:Content>